<template>
  <div>
    <!--三级分类相关的卡片-->
    <el-card class="box-card" style="margin: 10px">
      <CategorySelector @change="changeFn"
                        :disabled="showSkuAdd || showSpuAddOrUpdate" ></CategorySelector>
    </el-card>
    <!--查询操作对应的区域-->
    <el-card v-show="!showSkuAdd && !showSpuAddOrUpdate">
      <el-button  :disabled="!category3Id" @click="toAdd"
                  type="primary" icon="el-icon-circle-plus" size="small">
        添加SPU
      </el-button>
      <el-table
        v-loading.fullscreen.lock="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        border :data="tableData" style="margin-top: 10px">
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <el-table-column  label="SPU名称"  align="center" prop="spuName"></el-table-column>
        <el-table-column  label="SPU描述"  align="center" prop="description"></el-table-column>
        <el-table-column  label="操作"  align="center">
            <template slot-scope="{row}">
              <el-tooltip class="item" effect="dark" content="新增sku" placement="top">
                <el-button type="primary" @click="addSkuFn(row)"
                           size="mini" icon="el-icon-plus" ></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="编辑spu" placement="top">
                <el-button type="primary" @click="toEdit(row)"
                           size="mini" icon="el-icon-edit" ></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="查看sku列表" placement="top">
                <el-button type="info"   @click="showSkuListFn(row)"
                           size="mini" icon="el-icon-info"></el-button>
              </el-tooltip>
              <el-popconfirm :title="`确定删除${row.spuName}嘛?`" @onConfirm="delSpu(row.id)">
                <el-tooltip class="item" effect="dark" slot="reference"
                            content="删除spu" placement="top">
                  <el-button type="danger" size="mini" style="margin-left: 10px"
                             icon="el-icon-delete"></el-button>
                </el-tooltip>
              </el-popconfirm>
            </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        style="text-align: center;margin: 20px 10px;width: 95%"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChangeForPagination"
        :current-page="page"
        :page-sizes="[1,2,3,5]"
        :page-size="limit"
        layout="prev, pager, next, jumper ,->,sizes , total"
        :total="total">
      </el-pagination>
    </el-card>
    <!--新增或修改对应的区域-->
    <addOrUpdate :showSpuAddOrUpdate.sync="showSpuAddOrUpdate"
                 @success="successFn"
                 ref="addOrUpdate"></addOrUpdate>
    <!--sku列表对应的对话框-->
    <el-dialog
      :title="`${title} => SKU列表`"
      :visible.sync="showSkuList">
      <el-table v-loading.fullscreen.lock="skuLoading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                border :data="skuList">
        <el-table-column  label="名称" prop="skuName"></el-table-column>
        <el-table-column  label="价格(元)" prop="price"></el-table-column>
        <el-table-column  label="重量(吨)" prop="weight"></el-table-column>
        <el-table-column  label="默认图片">
          <template slot-scope="{row}">
            <img :src="row.skuDefaultImg" style="width: 80px">
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!--sku的新增界面-->
    <addSku :showSkuAdd.sync="showSkuAdd" ref="addSku"></addSku>
  </div>
</template>

<script>
  import addOrUpdate from "./addOrUpdate"
  import addSku from "./addSku.vue"
  export default {
    name: "spuList",
    data(){
      return {
        page:1,
        limit:1,
        tableData:[],
        loading:false,
        category1Id:2,
        category2Id:13,
        category3Id:61,
        total:0,

        showSkuAdd:false, //控制sku新增界面是否显示
        showSpuAddOrUpdate:false,//控制spu新增界面是否显示

        skuList:[],//sku列表
        showSkuList:false, //sku列表是否要显示
        title:"", //sku列表标题
        skuLoading:false//sku列表加载时的loading效果
      }
    },
    methods:{
      //展示sku新增界面
      addSkuFn(row){
        this.showSkuAdd= true;
        //获取新增界面基础数据
        const {category1Id,category2Id,category3Id} = this;
        this.$refs.addSku.initData({
          ...row,
          category1Id,
          category2Id,
          category3Id
        })
      },

      //展示sku列表
      async showSkuListFn(row){
        //row:spu对象
        this.showSkuList=true;
        this.title = row.spuName;
        //发送请求获取sku列表
        this.skuLoading = true;
        try {
          const {data} = await this.$API.product.sku.getSkuList(row.id);
          this.skuList = data;
        }catch (e) {}finally {
          this.skuLoading = false;
        }
      },

      //删除spu
      async delSpu(spuId){
        //发请求
        await this.$API.product.spu.del(spuId);
        //提醒
        this.$message.success("删除成功")
        //刷新界面
        await this.getSpuList()
      },

      //新增和修改成功之后的回调
      successFn(flag){
        if (flag==="add") {
          this.page=1;
        }
        this.getSpuList()
      },
      //点击添加按钮
      toAdd(){
        this.showSpuAddOrUpdate = true
        const {category3Id} = this;
        this.$refs.addOrUpdate.initData({category3Id},"add")
      },
      //点击编辑按钮
      toEdit(row){
        //隐藏编辑页 展示修改界面
        this.showSpuAddOrUpdate = true;
        //获取最新的品牌数据 最新的销售属性数据 在addOrUpdate组件中进行展示
        this.$refs.addOrUpdate.initData(row,"edit")
      },

      //分页有关的方法
      async handleSizeChange(val) {
        this.page = 1;
        this.limit = val;
        await this.getSpuList();
      },
      async handleCurrentChangeForPagination(val) {
        this.page = val;
        await this.getSpuList();
      },

      //请求有关的方法
      async changeFn({level,value}){
        //level:分类等级
        //value:对应分类的id
        switch (level){
          case 1:
            //清空 23级分类的内容
            this.tableData = [];
            this.category2Id="",
            this.category3Id="",
            //重置1级分类
            this.category1Id = value;
            break;
          case 2:
            //清空3级分类的内容
            this.tableData = [];
            this.category3Id="",
            //重置2级分类
            this.category2Id = value;
            break;
          case 3:
            this.category3Id = value;
            //发送请求获取属性列表
            await this.getSpuList()
            break;
        }
      },
      async getSpuList(){
        //开启loading效果
        this.loading = true;
        const {page,limit,category3Id} = this;
        const {data:{records,total}} = await this.$API.product.spu.getSpuList({page,limit,category3Id});
        this.tableData = records;
        this.total=total;
        //关闭loading效果
        this.loading=false
      }
    },
    components:{
      addOrUpdate,
      addSku
    },
    async mounted(){
      await this.getSpuList()
    }
  }
</script>

<style lang="less">
  .box {
    width: 400px;

    .top {
      text-align: center;
    }

    .left {
      float: left;
      width: 60px;
    }

    .right {
      float: right;
      width: 60px;
    }

    .bottom {
      clear: both;
      text-align: center;
    }

    .item {
      margin: 4px;
    }

    .left .el-tooltip__popper,
    .right .el-tooltip__popper {
      padding: 8px 10px;
    }
  }
</style>
